<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" lang="en">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>

<!--    富文本编辑器-->
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }
        #toolbar-container { border-bottom: 1px solid #ccc; }
        #editor-container { height: 500px; }
    </style>


</head>
<body>
<div class="layui-form layuimini-form">


            <div class="layui-form-item">
                <label class="layui-form-label required">景区名</label>
                <div class="layui-input-block">
                    <input type="text" name="spot_name" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" th:value="${culture.getSpot_name()}" class="layui-input">

                    <input type="password" name="id"  th:value="${culture.getId()}" class="layui-input" style="display: none">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">联系方式</label>
                <div class="layui-input-block">
                    <input type="text" name="spot_contact" lay-verify="required" lay-reqtext="联系方式为空" placeholder="请输入用户名" th:value="${culture.getSpot_contact()}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">开放时间</label>
                <div class="layui-input-block">
                    <input type="text" name="spot_opentime" lay-verify="required" lay-reqtext="开放时间不能为空" placeholder="请输入用户名" th:value="${culture.getSpot_opentime()}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">交通指南</label>
                <div class="layui-input-block">
                    <input type="text" name="spot_route"  placeholder="请输入用户名" th:value="${culture.getSpot_route()}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="spot_address"  lay-verify="required" lay-reqtext="地址不能为空"
                           placeholder="请输入地址" th:value="${culture.getSpot_address()}" class="layui-input">
                </div>
            </div>
   <span th:value="${culture.getSpot_address()}" ></span>
         <div class="layui-form-item">
<!--            富文本编辑器-->
            <div id="editor—wrapper" >
                <div id="toolbar-container"><!-- 工具栏 --></div>
                <div id="editor-container"><!-- 编辑器 --></div>
            </div>
<!--             设置一个textarea，并隐藏，将富文本编辑器的html代码写入，在保存修改是一同传给后台-->
            <textarea id="spot_summary" name="spot_summary"  style="display: none" ></textarea>
         </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>


</div>
<!--富文本编辑器-->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>

    // 乱码转义
     function unescapeHTML (a){
            a = "" + a;
             return a.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
         }



    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;


        let spot_summary = ""
        // 切换语言
        const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
        window.wangEditor.i18nChangeLanguage(LANG)
        const {createEditor, createToolbar} = window.wangEditor

        // 获取设置的textarea
        let summary = document.getElementById('spot_summary')





        const editorConfig = {
            placeholder: 'Type here...',
            onChange(editor) {
                spot_summary = editor.getHtml()
                // 同步html到textarea
                summary.innerText = spot_summary
            },
            MENU_CONF: {}
        }




        //图片上传
        editorConfig.MENU_CONF['uploadImage']= {
            // form-data fieldName ，默认值 'wangeditor-uploaded-image'
            fieldName: 'file',
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 1024 * 1024 * 10, // 1M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: [],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            /* meta: {
                 token: 'xxx',
                 otherKey: 'yyy'
             },*/
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            /* headers: {
                 Accept: 'text/x-json',
                 otherKey: 'xxx'
             },*/
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,
            // 超时时间，默认为 10 秒
            timeout: 10 * 1000, // 5 秒
            server:"/UploadFile/upload-media",
            //小于该大小的图片以二进制与文字一同存入数据库
            base64LimitSize: 20 * 1024, // 20kb
            customInsert(res,insertFn){
                console.log(res)
                if (res.code === 0){
                    insertFn(res.data.url, res.data.alt, res.data.href)
                } else{
                    layer.msg("图片上传失败",{
                        icon:6,
                        time:1000
                    })
                }

            }
        }

        //视频上传
        editorConfig.MENU_CONF['uploadVideo']= {
            // form-data fieldName ，默认值 'wangeditor-uploaded-image'
            fieldName: 'file',
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 1024 * 1024 * 200, // 200M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: [],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            /* meta: {
                 token: 'xxx',
                 otherKey: 'yyy'
             },*/
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 自定义增加 http  header
            /* headers: {
                 Accept: 'text/x-json',
                 otherKey: 'xxx'
             },*/
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,
            // 超时时间，默认为 10 秒
            timeout: 10 * 1000, // 5 秒
            server:"/UploadFile/upload-media",
            //小于该大小的图片以二进制与文字一同存入数据库
            base64LimitSize: 20 * 1024, // 20kb
            customInsert(res,insertFn){
                console.log(res)
                if (res.code === 0){
                    insertFn(res.data.url, res.data.poster)
                } else{
                    layer.msg("图片上传失败",{
                        icon:6,
                        time:1000
                    })
                }

            }
        }



        const editor = createEditor({
            selector: '#editor-container',
            // 后端传值的html内容的部分符号会乱码，转义后初始富文本编辑器
            html: unescapeHTML('[[${culture.getSpot_summary}]]'),
            config: editorConfig,
            mode: 'default', // or 'simple'
        })



        const toolbarConfig = {}

        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        })







        //监听提交
        form.on('submit(saveBtn)', function (data) {

            let d = data.field;
            let url="/SuperCulture/saveCultureEdit"

            let index = parent.layer.getFrameIndex(window.name)


            $.ajax({
                url:url,
                type:"POST",
                data:d,
                success:function (res){
                    if (res.code === 0 ){
                        layer.msg("修改成功",{
                            icon:6,
                            time:1000
                        })
                        parent.layer.close(index)
                    }else{
                        layer.msg("修改失败",{
                            icon:5,
                            time:1000
                        })
                    }

                }
            })
            layer.closeAll('page')

            return false;
        });

    });
</script>





</body>
</html>